<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div class="fitness-sportdata">
        <div class="sportdatatop ">
            <div class="returns">
                <i class="iconfont colorbai  icon-shangyige" id="huiqu"></i>
            </div>

            <div class="difl juspa zhongjian">
                <h1 class="colorbai f20">我的运动数据</h1>
                <p class="yuan"></p>
            </div>

            <div class="database difl juspa mt30">
                <div class="databaseleft flg1">
                    <div class="colorbai line35">总运动</div>
                    <p class="colorbai line35"><span class="f28 fenzhong">99999</span>分钟</p>
                </div>
                <div class="databaseright flg1">
                    <div class="colorbai line35">本周消耗</div>
                    <p class="colorbai line35"><span class="f28 qianka">99999</span>千卡</p>
                </div>
            </div>

            <div class="datatail difl colorbai mt30">
                <div class="flg1">
                    <p class="line20">消耗(千卡)</p>
                    <p class="xiaohaoqianka line20">999</p>
                </div>

                <div class="flg1">
                    <p class="line20">累计(天)</p>
                    <p class="leijitian line20">999</p>
                </div>

                <div class="flg1">
                    <p class="line20">连续(天)</p>
                    <p class="lianxutian line20 lianxu">999</p>
                </div>
            </div>
        </div>

        <!-- 图表 -->
        <div class="chart">

            <!-- 柱状图 -->
            <div id="pillar" class="tubiaos "></div>

            <!-- 饼图 -->

            <div id="pie" class="tubiaos"></div>



            <!-- 折线图 -->
            <div id="line" class="tubiaos"></div>

            <!-- 堆叠的条形图 -->
            <div id="chart" class="tubiaos "></div>

            <!-- 引入echarts.js -->
            <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
        </div>


    </div>
</body>

</html>